<template>
  <div class="todaydata" style="width:1140px;height:20%">
    <div class="todaydata_title" style="display:flex">
     <h3 class="todaydata_h2">今日数据</h3>
        <span class="todaydata_title_date">{{nowday}}</span >
      <span class="todaydata_ovvern">详细数据</span>
      <i style="margin-left:1px;margin-top:5px" class="el-icon-arrow-right" ></i>
    </div>

    <div class="todaydata_Box"  >
      <ul style="display:flex">
        <li>
          <p class="tit">营业额</p>
          <p class="num">¥ {{turnover}}</p>
        </li>
        <li>
          <p class="tit">有效订单</p>
          <p class="num">{{validOrder}}</p>
        </li>
        <li>
          <p class="tit">订单完成率</p>
          <p class="num">
           <!--  {{ (overviewData.orderCompletionRate * 100).toFixed(0) }}% -->
           {{(orderCompletionRate*100).toFixed(2)}}%
          </p>
        </li>
        <li>
          <p class="tit">平均客单价</p>
          <p class="num">¥ {{unitPrice.toFixed(2)}}</p>
        </li>

        <li>
          <p class="tit">新增用户</p>
          <p class="num">{{newUsers}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getbussiness } from '@/api/wordspace'
import moment from 'moment'
export default {
  name: 'todaydataIndex',
  data () {
    return {
      newUsers: 0,
      orderCompletionRate: 0,
      turnover: 0,
      unitPrice: 0,
      validOrder: 0,
      nowday: ''
    }
  },
  created () {
    this.init()
  },
  methods: {
    async  init () {
      this.nowday = moment().format('YYYY.MM.DD')
      const res = await getbussiness()
      this.newUsers = res.data.newUsers
      this.orderCompletionRate = res.data.orderCompletionRate
      this.turnover = res.data.turnover
      this.unitPrice = res.data.unitPrice
      this.validOrder = res.data.validOrder
    //  console.log(res.data, 'res')
    }
  }
}
</script>

<style lang="less" scoped>

.todaydata  {
/* 水平阴影位置 | 垂直阴影位置 | 模糊距离 | 阴影的颜色 */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.048);
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.todaydata_Box{
padding-top:20px;
margin-left: -20px;

}

.todaydata_title_date{
  font-size: 12px;

  padding-top: 8px;
  padding-left: 10px;
  color: rgba(12, 12, 12, 0.582);
}
.todaydata_ovvern{
  width: 60px;
  padding-left: 78%;
   padding-top: 4px;
   font-size: 14px;

    color: rgba(12, 12, 12, 0.979);
}
.tit{
  font-size: 14px;
  padding-bottom: 20px;

}
.num{
  font-size: 16px;
}

li{

  width: 18%;
  height: 110px;
  margin-left: 15px;
  padding-left: 20px;
  padding-top: 20px;
  background-color: rgba(221, 221, 80, 0.068);
}
.num{
  padding-top: 10px;
  font-weight: 600;
}
</style>
